<script setup lang="ts">
import heard from "~/components/business/home/heard.vue";
import userInfo from "~/components/business/home/userInfo.vue";
import auth from "~/components/business/home/auth.vue";
import carousel from "~/components/business/home/carousel.vue";
import search from "~/components/business/home/search.vue";
import navBar from "~/components/business/home/navBar.vue";
import credit from "~/components/business/home/credit.vue";
import join from "~/components/business/home/join.vue";
import service from "~/components/business/home/service.vue";
import choose from "~/components/business/home/choose.vue";
import company from "~/components/business/home/company.vue";
import productListItem from "~/components/business/product/product-list-item.vue";
</script>

<template>
  <div class="bg-color">
    <div class="home-bg">
      <credit />
      <navBar />

      <div class="flex flex-col items-center justify-center pt-4">
        <div class="text-3xl">创建为中小企业服务与开创的服务平台</div>
        <div class="text-lg mt-2">聚焦人才,专业团队,为您服务</div>
      </div>

      <div class="w-[1400px] flex flex-col mx-auto">
        <!-- 搜索 -->
        <search />

        <div class="mt-8 flex h-[450px]">
          <!-- 轮播图 -->
          <carousel />
          <!-- 注册认证 -->
          <auth />
          <!-- 个人中心 -->
          <userInfo />
        </div>

        <!-- 听说 -->
        <heard />

        <!-- 入驻 -->
        <join />

        <!-- 服务 -->
        <service />
      </div>

      <!-- 优选企业 -->
      <div class="mt-10">
        <choose
          title="优选企业推荐"
          titleClass="text-white"
          descClass="text-white"
          desc="聚焦各行业前端，罗列供销前沿"
          bg="url('/images/choose-bg.png')"
        >
          <company />
        </choose>
      </div>

      <!-- 优选商品 -->
      <choose
        title="优选产品推荐"
        titleClass="text-gray-950"
        descClass="text-gray-950"
        desc="聚焦各行商品，罗列精选好物"
        bg="#E9EDF7"
      >
        <div class="grid grid-rows-2 grid-cols-4 gap-6">
          <template v-for="(item, index) in 8" :key="index">
            <productListItem></productListItem>
          </template>
        </div>
      </choose>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bg-color {
  background-color: #f3f7ff;
}
.home-bg {
  background: url("/assets/images/bg/homg-bg.png") no-repeat 100% -200px;
}
</style>
